<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/HanderFooter2.css">

    <style>
        .login {
            text-align: center;
            margin-top: 100px;
        }

        .pLogin .loginName {
            height: 38px;
            font-size: 30px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 38px;
        }

        .login .ipt {
            width: 240px;
            height: 40px;
            line-height: 2.5rem;
            margin: 0 auto;
            margin-top: 1.25rem;
        }

        element.style {
            margin-top: 40px;
        }

        .login button {
            width: 240px;
            height: 40px;
            margin-top: 20px;
            color: #050505;
            background: #FFD637;
        }

        button:hover {
            color: #ffffff;
            background-color: #f0ad4e;
            border-color: #eea236;
        }
    </style>
</head>
<body>
<div style="overflow: hidden">
    <el-container>
        <el-header style="padding: 0;height: auto">
            <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
            <div class="header222" style="overflow:hidden;background-color: white">
                <div style=" width:20%;float: left;overflow:hidden; padding-top: 20px">
                    <img src="./images/logo.png" alt=""
                         style="float: left;margin-left:100px;padding-bottom:15px;width: 120px">
                </div>
                <div id="app" style="float: left ;
                     vertical-align: bottom;
                      width: 30%;
                     padding-left: 20px;">
                    <el-menu :default-active="activeIndex"
                             text-color="#000"
                             mode="horizontal"
                             active-text-color="#ffd04b">
                        <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="1">
                            商城
                        </el-menu-item>
                        <el-menu-item style=" margin-left:80px;font-size: 17px;width: 15%;text-align: center" index="2">
                            周边
                        </el-menu-item>
                    </el-menu>
                </div>
                <div class="rightMenu" style="float:right;padding-top: 15px;width:25%">
                    <input class="form-control menuipt" placeholder="请输入搜索内容">

                    <div class="right icons soushuo" data-menu="2" style="margin-right: 30px;" style="width: 70%">

                        <img src="./img/seach.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="0" onclick="window.location.href='/font/shoppingCart'"
                         style="margin-right: 20px;position: relative;">
                        <div id="cartNum"
                             style="position: absolute;top:-6px;right:-6px;background: red;color: #fff;width:16px;height:16px;display:flex;justify-content:center;align-items:center;font-size: 12px;border-radius: 50%;letter-spacing: 0px">
                            0
                        </div>
                        <img src="./img/shoppingcart.png" class="iconimg1" style="width: 70%">
                    </div>
                    <div class="right icons" data-menu="1">
                        <img src="./img/people.png" class="iconimg1" style="width: 70%">
                    </div>

                </div>

            </div>
        </el-header>

        <el-main style="height: auto">

            <div class="pLogin">
                <div class="login sgin" style="min-height: calc(100vh - 490px); display: block;">


                    <div class="loginName" style="margin-top: 100px">
                        会员注册
                    </div>
                    <el-form :label-position="labelPosition" label-width="80px" :model="vipUser" style="width: 350px;margin-left: 35%;margin-top:50px;margin-bottom: 50px">
                        <el-form-item label="账号姓名">
                            <el-input  v-model="vipUser.username"></el-input>
                        </el-form-item>
                        <el-form-item  label="账号密码">
                            <el-input type="password" v-model="vipUser.password"></el-input>
                        </el-form-item>
                        <button class="btn btn-warning sginBtn " style="border: none;border-radius: 0;font-size: 13px;letter-spacing:
        1px;margin-bottom: 50px" @click.prevent="reg()">立即注册
                        </button>

                    </el-form>


                    <div class="wechat" style="vertical-align: center;">
<!--                   用户注册   -->
                        <a href="" style="color: #050505">
                            <div style="float: left; margin-left: 45%">
                                <div style="float: left;padding-top: 5px;">
                                    <a href="VipLogin3.html">已有账号,去登陆</a>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer style="height: 400px;padding: 0">
            <div class="footModal clr">
                <div class="fmodal">
                    <div style="display: flex">
                        <div class="foot shop-mart">
                            <div class="fs16 fwb line40" style="color:#000">商 城</div>
                            <div class="fs12 fwb  line24" onclick="category(0)">全部商品</div>
                            <div class="fs12 fwb  line24" onclick="category(10037)">新品上市</div>
                            <div class="fs12 fwb  line24" onclick="category(10000)">登机/托运</div>
                            <div class="fs12 fwb  line24" onclick="category(10024)">材质分类</div>
                            <div class="fs12 fwb  line24" onclick="category(10039)">镇店爆款</div>
                            <div class="fs12 fwb  line24" onclick="category(10038)">明星推荐</div>
                            <div class="fs12 fwb  line24" onclick="category(10017)">联名设计</div>
                            <div class="fs12 fwb  line24" onclick="category(10012)">旅行配件</div>
                        </div>
                        <div class="foot">
                            <div class="fs16 fwb line40 hover-item" style="color:#000" onclick="category(10012)">周 边
                            </div>
                            <div class="fs12 fwb line24 hover-item" onclick="category(10014)">收纳系列</div>
                            <div class="fs12 fwb  hover-item" onclick="category(10015)">生活周边</div>
                            <div class="foot-a">
                                <a target="_blank" href="https://weibo.com/level8official"><img src="img/1.png"></a>
                                <a target="_blank" href=" "><img src="img/2.png"></a>
                                <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                                        src="img/3.png"></a>
                                <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                                        src="img/4.png"></a>
                            </div>
                        </div>
                    </div>
                    <style>
                        .hover-item {
                            cursor: pointer;
                        }
                    </style>
                    <div class="follow" style="display: flex;flex-direction: column;justify-content: space-between">
                        <div>
                            <div class="followimg">
                                <img src="img/7.png" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">关注公众号</div>
                            </div>
                            <div class="followimg" style="margin-right: 40px;">
                                <img src="img/7.jpg" style="margin-bottom:4px">
                                <div class="fs12 fwb line30h30">绑定产品</div>
                            </div>
                        </div>
                        <div class="clr">
                            <input class="form-control-bottom left searchipts" placeholder="搜索关键词">
                            <a href="www.baidu.com">
                                <div class="bg-black left  tac searchimgs"
                                     style="display: flex;align-items: center;justify-content: center">
                                    <img src="img/51.png"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" tar foottext">
                <span class=" foottext1"> ©Copyright Level8 2020 </span>
                <span class=" foottext2"> level8@level8cases.com</span>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                visible: false,
                activeIndex: '1',
                activeIndex2: '1',
                input: '',

                labelPosition: 'right',
                vipUser: {
                    username: '',
                    password: '',

                }
            };


        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            reg(){
                console.log(v.vipUser.username+"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
                axios.post("/VipLogin/reg",v.vipUser).then(function () {
                    alert("完成")
                })
            }

        }

    })
</script>